<template>
    <view class="head-back">
        <view class="back" @click="onBack">
            <text></text>
        </view>
        <view class="title">
            <text>{{title}}</text>
        </view>
        <!-- <view class="more-icon">
            <view class="icon-list">
                <text class="iconfont icon-fadajing"></text>
            </view>
        </view> -->
    </view>
</template>

<script>

export default {
    props: {

        title: {
            type: String,
            default: ''
        },
    },
    components: {},
    data() {
        return {

        };
    },
    created() {

    },
    methods: {
        /**
        * 返回点击
        */
        onBack() {
            uni.navigateBack();
        },
    },
};
</script>
<style scoped lang='scss'>
/* 顶部返回 */
.head-back {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100rpx + var(--status-bar-height));
  background: linear-gradient(to bottom right, #2e996f, #3f99ab);
  /* #ifdef APP-PLUS */
  padding-top: var(--status-bar-height);
  /* #endif */
  /* #ifdef MP-WEIXIN */
  padding-top: 20rpx;
  /* #endif */
  .back {
    position: absolute;
    left: 0;
    top: 0;
    /* #ifdef APP-PLUS */
    padding-top: var(--status-bar-height);
    /* #endif */
    /* #ifdef MP */
    padding-top: 20rpx;
    /* #endif */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 100%;
    text {
      width: 20rpx;
      height: 20rpx;
      border-left: 2rpx solid #ffffff;
      border-bottom: 2rpx solid #ffffff;
      transform: rotate(45deg);
    }
  }
  .title {
    display: flex;
    align-items: center;
    text {
      font-size: 28rpx;
      color: #ffffff;
    }
  }
  .more-icon {
    position: absolute;
    right: 0;
    top: 0;
    /* #ifdef APP-PLUS */
    right: 0rpx;
    padding-top: var(--status-bar-height);
    /* #endif */
    /* #ifdef MP */
    right: 220rpx;
    padding-top: 20rpx;
    /* #endif */
    display: flex;
    align-items: center;
    height: 100%;
    .icon-list {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 100%;
      text {
        font-size: 34rpx;
        color: #ffffff;
      }
    }
  }
}
</style>